<template>
  <div class="page fxActivity-list">
    <fxActivityFilterItem
      ref="fxActivityFilterItem"
      @filterChoice="handleFilterChoice"
      :statusList="statusList"
    ></fxActivityFilterItem>
    <fxActivityDetails ref="fxActivityDetails" :detailsParam="detailsParam"></fxActivityDetails>
    <div class="scroll-view">
      <customHeader
        :middleTitle="headerTitle"
        @leftCallBack="goBack"
        @rightCallBack="handleClickFilter"
      >
        <div>
          <i class="filter-icon zhk-nav_filter" :class="{blue:filterData.status.length}"></i>
        </div>
      </customHeader>
      <searchBar @search="searchCallbck" placeholder="请输入门店名称" />
      <div class="page-body">
        <div class="section" ref="wrapper" :style="{ height:'100%' }">
          <no-data msg="暂无数据" v-if="list.length==0"></no-data>
          <ul
            class="list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
          >
            <li v-for="(item,index) in list" :key="index" @click="linkToDetail(item)">
              <div class="top">
                <span class="acid">活动ID:{{item.marketingId}}</span>
                <span
                  class="status"
                  :class="statusFormate(item.status)['color']"
                >{{statusFormate(item.status)['text']}}</span>
              </div>
              <div class="bottom">
                <div class="left-icon">
                  <img :src="imgFormate(item.doorheadPhoto)" alt />
                </div>
                <div class="right-data">
                  <div class="shop-name">{{shopName(item)}}</div>
                  <div
                    class="data-time"
                  >{{tradeTimeFormate(item.startTime)}} 至 {{tradeTimeFormate(item.endTime)}}</div>
                </div>
              </div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import jsBridge from "../../tools/jsBridge.js";
import config from "../../base/profile/config.json";
import { Search, Toast, MessageBox } from "mint-ui";
import noData from "../../components/noData/noData";
import fxActivityDetails from "../fxActivityRecord/fxActivityDetails";
import fxActivityFilterItem from "./fxActivityFilterItem";
export default {
  name: "fxActivityList",
  data() {
    return {
      loading: false,
      noMore: false,
      nextPage: 1,
      list: [],
      filterData: {
        status: []
      },
      pageSize: 20,
      currentPage: 1,
      searchParam: {
        shopName: "",
      },
      detailsParam: {},
      statusList: []//活动状态
    };
  },
  methods: {
    shopName(item){
      let shopName=item.mainShopName;
      if(item.branchShopName){
        shopName+="("+item.branchShopName+")";
      }
      return shopName;
    },
    imgFormate(url) {
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix);
    },
    tradeTimeFormate(tradeTime) {
      return CommonUtil.timestampToTime(tradeTime);
    },
    searchCallbck(v) {
      this.searchParam.shopName = v;
      this.loadData(1);
    },
    linkToDetail(item) {
      this.detailsParam = item;
      this.$refs.fxActivityDetails.popupShow();
    },

    //打开筛选
    handleClickFilter() {
      this.$refs.fxActivityFilterItem.popupShow();
    },
    //筛选确定
    handleFilterChoice(v) {
      this.filterData.status = v;
      this.loadData(1);
    },
    goBack() {
      if (this.$refs.fxActivityDetails.popupVisible) {
        this.$refs.fxActivityDetails.popupHide();
      } else if (this.$refs.fxActivityFilterItem.popupVisible) {
        this.$refs.fxActivityFilterItem.back();
      } else {
        if (this.$route.query.close == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    statusFormate(status) {
      //color(色值):orange  grey blue
      let v = { text: "", color: "" };
      if (status == "10") {//内审中
        v = { text: "审核中", color: "blue" };
      } else if (status == "11") {//内审驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "12") {
        v = { text: "待商家确认", color: "blue" };
      } else if (status == "13") {
        v = { text: "商家驳回", color: "grey" };
      } else if (status == "14") {//撤回申请
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "20") {//外审中
        v = { text: "审核中", color: "blue" };
      } else if (status == "21") {//外审驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "30") {
        v = { text: "未开始", color: "blue" };
      } else if (status == "31") {
        v = { text: "进⾏中", color: "blue" };
      } else if (status == "32") {//变更补贴审核中
        v = { text: "进⾏中", color: "" };
      } else if (status == "34") {
        v = { text: "变更补贴审核通过", color: "" };
      } else if (status == "35") {//变更补贴驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "40") {
        v = { text: "过期未确认", color: "grey" };
      } else if (status == "41") {
        v = { text: "已关停", color: "grey" };
      } else if (status == "42") {
        v = { text: "已结束", color: "grey" };
      } else if (status == "43") {
        v = { text: "已失效", color: "grey" };
      }
      return v;
    },
    loadData(currentPage) {
      if (currentPage == 1) {
        this.list = [];
      }
      this.loading = true;
      const status = this.filterData.status.length > 0 ? JSON.stringify(this.filterData.status) : "";
      this.ajax({
        url: `/newapp/marketing/getShopList.do?currentPage=${currentPage}&pageSize=${this.pageSize}&shopName=${this.searchParam.shopName}&status=${status}`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (res.success) {
            const data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.pageData && data.pageData.length > 0) {
              this.list = this.list.concat(data.pageData);
              if (data.nextPage > currentPage) {
                this.nextPage = data.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },
    loadStatus() {
      this.ajax({
        url: `/newapp/AppMsg/getMarketingShopStatus.do`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          if (res.success) {
            let statusList = [];
            for (const item of res.resultObject) {
              statusList.push({ label: item.name, value: item.code, checked: false });
            }
            this.statusList = statusList;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },

    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData(this.nextPage);
    },
  },
  created() {
    this.loadStatus();
  },
  computed: {
    headerTitle() {
      let title = "门店活动";
      return title;
    }
  },
  components: {
    customHeader,
    noData,
    searchBar,
    fxActivityFilterItem,
    fxActivityDetails
  }
};
</script>
<style lang='scss' scoped>
@import "fxActivityRecord";
</style>
